import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params, Router} from '@angular/router';
import {PolicyAnalysisCloudService} from './policy-analysis-cloud.service';
import * as echarts from 'echarts';
import 'echarts-wordcloud';

@Component({
  selector: 'app-policy-analysis-cloud',
  templateUrl: './policy-analysis-cloud.component.html',
  styleUrls: ['./policy-analysis-cloud.component.less']
})
export class PolicyAnalysisCloudComponent implements OnInit {
  selectedIndex;
  cloudTwoLevels = [];
  cloudChartData = [];
  isSpinning;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private cloudService: PolicyAnalysisCloudService) {
  }

  ngOnInit(): void {
    this.route.queryParams.pipe().subscribe((params: Params) => {
      if (params.wordFrameTopId) {
        const topId = params.wordFrameTopId;
        // this.selectedIndex = params.wordFrameIndex;
        this.getWordFrameTwoLevel(topId);
      }
    });
  }

// 将所有的二级词表框架push进一个数组
  getWordFrameTwoLevel(topId: number) {
    this.isSpinning = true;
    this.cloudService.getWordFrameTwoLevel(topId).subscribe(res => {
      this.cloudTwoLevels = res.result;
      const twoLevelId = this.cloudTwoLevels[0].id;
      this.getId(twoLevelId);
      this.isSpinning = false;
    });
  }

  getId(id: number) {
    this.cloudService.getCloud(id).subscribe(res => {
      this.cloudChartData = res.result;
      this.setWordCloud();
    });

  }

  setWordCloud() {
    const el = document.getElementById('cloud-chart') as HTMLDivElement;
    const myCharts = echarts.init(el);
    myCharts.setOption({
      series: [{
        type: 'wordCloud',

        shape: 'circle',

        // maskImage: maskImage,

        left: 'center',
        top: 'center',
        width: '100%',
        height: '100%',
        right: null,
        bottom: null,
        sizeRange: [35, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color() {
              // Random color
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },

        // Data is an array. Each array item must have name and value property.
        data: this.cloudChartData
      }]
    });
    // myCharts.on('click', (params) => {
    //   this.navigateToDetail(params.data.value);
    //   console.log('myChart----click---:', params, '------', params.data);
    // });
  }

  navigateToDetail(value: number) {
    this.router.navigate(['/new-policy-detail'], {queryParams: {id: value, type: '相关政策'}});

  }

}
